import { useMemo } from "react";
import _styles from "./style.module.less";
import _classnames from "classnames";

export interface IFlexProps extends React.HTMLAttributes<HTMLElement> {
  inline?: boolean;
  alignItems?: React.CSSProperties['alignItems'];
  justifyContent?: React.CSSProperties['justifyContent'];
  gap?: React.CSSProperties['gap'];
  vertical?: boolean;
  wrap?: React.CSSProperties['flexWrap']
}
export function Flex(props: IFlexProps) {
  const {
    className,
    inline,
    alignItems,
    justifyContent,
    style,
    gap,
    vertical = false,
    wrap,
    ..._p
  } = props;


  const _root_classname = _classnames(
    _styles.flex, {
    [_styles.inline]: inline
  }, className);

  const _style = useMemo(() => {
    const ret: React.CSSProperties = {
      alignItems,
      justifyContent,
      gap,
      flexWrap: wrap,
      flexDirection: vertical ? 'column' : 'row',
      ...style,
    }
    return ret;
  }, [alignItems, justifyContent, gap, style, wrap, vertical])


  return <div {..._p} className={_root_classname} style={_style} />
}